<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习1</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <!-- 1.先布局放一个复选框，一个下拉列表框，两个文本框和一个战术结果的div -->
    <!-- 2.把每个表单元素的数据进行显示（最后成功后要删除） -->
    <!-- 3.下拉列表框和数据展示的div进行隐藏和显示 -->
    <!-- 4.获取文本框数据，结合是否会员和会员等级来决定折扣，进行计算（computed） -->

    <div id="app">
        <input type="checkbox" v-model="checkValue" @change="optionValue='顾客'">是否会员<br>
        <!-- <div v-if="checkValue"> -->
            <select v-model="optionValue" v-show="checkValue">
                <option value="钻石会员">钻石会员</option>
                <option value="黄金会员">黄金会员</option>
                <option value="白金会员">白金会员</option>
            </select>
            <br>
        <!-- </div> -->
        <!-- {{optionValue}} -->
            数量：<input type="text" v-model="num"><br>
            单价：<input type="text" v-model="price" @keydown.enter="show=true"><br>
        <div v-show='show'>
            尊敬的{{optionValue}},你购买的数量是{{num}},单价是{{price}},折扣是{{discount}},总价是{{num*price*discount}}。
        </div>
        

    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                checkValue:false,
                optionValue:'顾客',
                num:100,
                price:50,
                show:false
            }
        },
        computed:{
            discount(){
                if (this.optionValue == '钻石会员') return 0.5;
                else if (this.optionValue == '黄金会员') return 0.6;
                else if (this.optionValue == '白金会员') return 0.8;
                else return 1;
            }
        }
    }).mount("#app")

</script>